<!DOCTYPE html>
<html>
<head>
  <title>Video.js | HTML5 Video Player</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="data:text/css;charset=utf-8," data-href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">

  <!-- Chang URLs to wherever Video.js files will be hosted -->
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <!-- video.js must be in the <head> for older IEs to work. -->
  <script src="video.js"></script>

  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>


</head>
<body>
<!-- Small modal -->
<a href="javascript:" data-toggle="modal" data-target=".bs-example-modal-xm"  video="http://iokbl2.social-touch.com/static/test.mp4">111
<img src="http://iokbl2.social-touch.com/data/attachment/block/5d/5d7c00efe149fd3a79dd5edcc3e98e2d.jpg"  width="200px" height="200px" />
</a>

<a href="javascript:" data-toggle="modal" data-target=".bs-example-modal-xm"  video="http://bailian.ka.social-touch.com:30399/static/gequ.mp4">2222
<img src="http://iokbl2.social-touch.com/data/attachment/block/5d/5d7c00efe149fd3a79dd5edcc3e98e2d.jpg" width="200px" height="200px" />
</a>

<div class="modal fade bs-example-modal-xm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content" style="width: 400px;">
       <video id="js_video" class="video-js vjs-default-skin" autoplay="true" controls preload="none" width="600"  height="400"      poster=""   >
   
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
    </div>
  </div>
</div>


<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script >
$('.bs-example-modal-xm').on('show.bs.modal', function (event) {    
  var model = $(event.relatedTarget) // Button that triggered the modal
  $(this).find('video').attr('src', model.attr('video'));
  
  
})
</script>
</body>
</html>
